<template>
  <div>
    <div class="row_main" style="padding: 20px">
      <el-button type="shenda" icon="el-icon-refresh" @click="currentPage=1;initData()">刷新数据</el-button>
      <el-button type="shenda" icon="el-icon-plus" @click="addWeChat">添加公众号</el-button>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" class="row-main-table"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" ref="table">
        <el-table-column prop="gzhName" label="公众号名称" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="appid" label="appid" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="mpName" label="公众号文件名称" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="dictGzhStatusName" label="是否开启" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'">
          <template slot-scope="scope">
<!--            <span :style="{'color': scope.row.dictGzhStatus=='C_YES'?'green':'red'}">{{scope.row.dictGzhStatusName}}</span>-->
            <el-switch
              v-model="scope.row.dictGzhStatus=='C_YES'?true:false"
              active-text=""
              inactive-text=""
              @change="openPayWay(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="updateWeChat(scope.row)" v-preventReClick>编辑</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="openPayWay(scope.row)" v-preventReClick v-if="scope.row.dictGzhStatus=='C_NO'">开启</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          class="row-main-pager"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10,20,50,100]"
          background></el-pagination>
      </div>
    </div>
    <el-dialog
      title="配置公众号信息"
      :visible.sync="showAddDialog"
      width="500px"
      center>
      <el-form :model="form" ref="form" :rules="rules" label-width="140px">
        <!--    配置公众号信息    -->
        <el-form-item label="公众号名称" prop="gzhName" >
          <el-input v-model="form.gzhName" />
        </el-form-item>
        <el-form-item label="APPID" prop="appid" >
          <el-input v-model="form.appid" />
        </el-form-item>
        <el-form-item label="secret" prop="secret" >
          <el-input type="textarea" v-model="form.secret" />
        </el-form-item>
        <el-form-item label="请上传公众号文件" prop="fileName">
          <el-button type="primary" >上传公众号文件</el-button>
          <input type="file" @change="uploadWeChatFile" class="uploadClass" id="file1" ref="file"/>
          <span v-if="form.fileName" style="margin-left: 10px">{{form.fileName}}<i class="el-icon-success" style="color: green;margin: 10px"></i></span>
        </el-form-item>

<!--        <el-form-item label="请上传小程序域名校验文件" prop="fileName">
          <el-button type="primary" >请上传小程序域名校验文件</el-button>
          <input type="file" @change="uploadSmallFile" class="uploadClass" id="file2" ref="file2"/>
          <span v-if="form.smallFile" style="margin-left: 10px">{{form.smallFileName}}<i class="el-icon-success" style="color: green;margin: 10px"></i></span>
        </el-form-item>-->
        <el-form-item label="是否立即开启" prop="dictGzhStatus">
          <el-radio-group v-model="form.dictGzhStatus" :disabled="id!==''">
            <el-radio-button label="C_YES">开启</el-radio-button>
            <el-radio-button label="C_NO">关闭</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit('form')" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getWeChatList, saveWeChat, updateWeChat} from '@/api/getData'
export default {
  name: 'gongzhonghao',
  data() {
    return {
      form: {
        appid: '',
        secret: '',
        fileName: '',
        file: null,
        dictGzhStatus: 'C_NO',
      },
      rules: {
        gzhName: [{required: true, message: '请输入公众号名称', trigger: 'blur'}],
        appid: [{required: true, message: '请输入APPID', trigger: 'blur'}],
        secret: [{required: true, message: '请输入secret', trigger: 'blur'}],
        dictGzhStatus: [{required: true, message: '请选择是否立即开启', trigger: 'change'}],
      },
      tableData: [],
      tableLoading: false,
      showAddDialog: false,
      currentPage: 1,
      pageSize: 10,
      title: '',
      total: 0,
      id: '',
      dictStatus: '',
      pagekey: '',
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let returnData = await getWeChatList({
        page: {
          current: this.currentPage + '',
          size: this.pageSize + ''
        }
      });
      this.tableData = [];
      this.total = 0;
      if (returnData.data.records) {
        for (let item of returnData.data.records) {
          this.tableData.push(item);
        }
        this.total = returnData.data.total;
      }
    },
    uploadWeChatFile() {
      this.form.file = document.getElementById('file1').files[0];
      this.form.fileName = document.getElementById('file1').files[0].name;
      console.log(this.form.file)
    },
    uploadSmallFile() {
      this.form. smallFile= document.getElementById('file2').files[0];
      this.form.smallFileName = document.getElementById('file2').files[0].name;
      console.log(this.form.smallFile)
    },
    async addWeChat() {
      this.pagekey = await this.$getPageKey();
      this.id = '';
      if(this.$refs.file){
        this.$refs.file.value = '';
      }

      this.form = {
        gzhName: '',
        appid: '',
        appSecret: '',
        file: null,
        fileName: '',
        dictGzhStatus: 'C_NO',
        andName:null,
        andValue:''
      }

      this.showAddDialog = true;

    },
    async updateWeChat(row) {
      this.pagekey = await this.$getPageKey();
      this.id = row.id;
      this.form = {
        gzhName: row.gzhName,
        appid: row.appid,
        secret: row.secret,
        dictGzhStatus: row.dictGzhStatus,
        file: null,
        fileName: '',
        andName:row.andName,
        andValue:row.andValue,
      }
      this.showAddDialog = true;
    },

    async openPayWay(row) {
      if(row.dictGzhStatus=='C_NO'){
        this.pagekey = await this.$getPageKey();
        this.$confirm('是否立即开启当前公众号？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let returnData = await updateWeChat({
            id: row.id,
            // dictGzhStatus: 'C_YES',
            pagekey: this.pagekey
          })
          this.pagekey = await this.$getPageKey();
          if (returnData.code == 10000) {
            this.$message({
              type: 'success',
              message: '公众号开启成功!'
            });
            this.initData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },

    onsubmit(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (this.form.file == null&&!this.id) {
            this.$message.error('请上传公众号文件')
            return false;
          }
          console.log(this.form.file)
          // let payment = {
          //   id: this.id,
          //   gzhName: this.form.gzhName,
          //   appid: this.form.appid,
          //   secret: this.form.secret,
          //   dictGzhStatus: this.form.dictGzhStatus,
          //   gzh: this.form.file,
          // }
          let returnData = await saveWeChat({
            id: this.id,
            gzhName: this.form.gzhName,
            appid: this.form.appid,
            secret: this.form.secret,
            dictGzhStatus: this.form.dictGzhStatus,
            gzh: this.form.file,
            xcx:this.form.smallFile,
            andName:this.form.andName,
            andValue:this.form.andValue
          }, {pagekey: this.pagekey})
          this.pagekey = await this.$getPageKey();
          this.showAddDialog = false;
          if (returnData.code == 10000) {
            this.$message({
              type: 'success',
              message: '公众号信息配置成功'
            })
          }
          this.initData()
        }
      })

    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
  }
}
</script>
<style>
.uploadClass{
  width: 150px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index:10;
}
</style>
